<form class="form-horizontal" novalidate name="itemDiverseForm"
      ng-submit="itemDiverseForm.$valid && saveItemDiverse()" style="margin-top:20px;">
    <div class="form-group">
        <label class="control-label col-md-2">Item: </label>
        <label class="control-label col-md-4" style="text-align: left;">{{item.name}}</label>
    </div>

    <div ng-show="itemDiverses.length > 0" class="row form-group">
            <label class="col-md-2 control-label">Status:</label>
            <div class="col-md-6">
                <ui-select name="status" ng-model="diverse.status" ng-disabled="submitLabel == 'Save'">
                    <ui-select-match>
                        <div ng-bind="$select.selected"></div>
                    </ui-select-match>
                    <ui-select-choices repeat="status  in statusList| filter: $select.search" refresh="getStatusList($select.search)" refresh-delay="50">
                        <div ng-bind="status"></div>
                    </ui-select-choices>
                </ui-select>
            </div>

    </div>
    <div class="form-group">
        <label class="control-label col-md-2">Properteis: </label>
    </div>

    <div class="form-group" ng-switch on="field.itemProperty.type" ng-repeat="field in diverseFields">
        <label class="control-label col-md-offset-1 col-md-2">{{field.itemProperty.name}}:</label>
        <div class="col-md-3">
            <input-validation-message field="field.{{$index}}.value" form="itemDiverseForm"></input-validation-message>
            <div ng-show="!field.availableDiverseValues || field.availableDiverseValues.length===0">
                <div ng-switch-when="Number">
                    <div  class="col-md-6" style="padding: 0px;">
                        <input class="form-control" type="number" name="field.{{$index}}.value" ng-model="fieldMap[field.propertyId].value"
                               ng-required="!(field.availableDiverseValues && field.availableDiverseValues.length>0)"/>
                    </div>
                    <div class="col-md-6"  style="padding-right: 0px;">
                        <ui-select name="field.{{$index}}.unit" ng-model="fieldMap[field.propertyId].unit"
                                   ng-show="field.itemProperty.unitType && field.itemProperty.unitType != ''">
                            <ui-select-match>
                                <div ng-bind="$select.selected"></div>
                            </ui-select-match>
                            <ui-select-choices repeat="item in fieldUnits[field.itemProperty.unitType]">
                                <div ng-bind="item"></div>
                            </ui-select-choices>
                        </ui-select>
                    </div>
                </div>
                <lt-date-time ng-switch-when="Date" value="fieldMap[field.propertyId].value"
                              ng-required="!(field.availableDiverseValues && field.availableDiverseValues.length>0)"></lt-date-time>
                <input ng-switch-when="Text" class="form-control" type="text" name="field.{{$index}}.value"
                       ng-model="fieldMap[field.propertyId].value"
                       ng-required="!(field.availableDiverseValues && field.availableDiverseValues.length>0)"/>
                <input ng-switch-default class="form-control" name="field.{{$index}}.value" ng-model="fieldMap[field.propertyId].value"
                       ng-required="!(field.availableDiverseValues && field.availableDiverseValues.length>0)"/>
            </div>

            <ui-select name="field.{{$index}}.value" ng-model="fieldMap[field.propertyId].selectedProduct"
                       ng-show="field.availableDiverseValues && field.availableDiverseValues.length>0"
                       on-select="diverseValuesSelected($index, $select.selected)"
                       ng-required="field.availableDiverseValues && field.availableDiverseValues.length>0">
                <ui-select-match>
                    <div>{{$select.selected.value}} {{$select.selected.unit}}</div>
                </ui-select-match>
                <ui-select-choices repeat="diverseObj in field.availableDiverseValues">
                    <div>{{diverseObj.value}} {{diverseObj.unit}}</div>
                </ui-select-choices>
            </ui-select>

        </div>
        <div class="col-md-3"  ng-show="showfieldsOther[$index]" style="padding-left: 0px;">
            <input-validation-message field="field.{{$index}}.value" form="itemDiverseForm"></input-validation-message>
            <div ng-switch-when="Number">
                <div  class="col-md-6"  style="padding: 0px;">
                    <input class="form-control" type="number"  name="field.{{$index}}.value"  ng-required="showfieldsOther[$index]"
                           ng-model="fieldMap[field.propertyId].otherValue"/>
                </div>
                <div class="col-md-6"  style="padding-right: 0px;">
                    <ui-select name="field.{{$index}}.value" ng-model="fieldMap[field.propertyId].otherUnit"
                               ng-show="field.itemProperty.unitType && field.itemProperty.unitType != ''">
                        <ui-select-match>
                            <div ng-bind="$select.selected"></div>
                        </ui-select-match>
                        <ui-select-choices repeat="item in fieldUnits[field.itemProperty.unitType]">
                            <div ng-bind="item"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
            <lt-date-time ng-switch-when="Date" value="fieldMap[field.propertyId].otherValue" ng-required="showfieldsOther[$index]"></lt-date-time>
            <input ng-switch-when="Text" class="form-control" type="text" name="field.{{$index}}.value"
                   ng-model="fieldMap[field.propertyId].otherValue" ng-required="showfieldsOther[$index]"/>
            <input ng-switch-default class="form-control" name="field.{{$index}}.value"
                   ng-model="fieldMap[field.propertyId].otherValue"
                   ng-required="showfieldsOther[$index]"/>
        </div>
    </div>
    <div style="text-align:right;" permission-check="{{'item::itemSpec_write'}}">
        <waitting-btn type="submit" btn-class="btn blue"
                      value="submitLabel" is-loading="loading"></waitting-btn>
        <button ng-click="resetItemDiverse()" type="button" class="btn grey">Reset</button>
    </div>
</form>
<div class="portlet light box-shadow-none" style="padding-left:0px; padding-right:0px;">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject bold uppercase">Diverse</span>
        </div>
    </div>
    <div ng-if="diverseFields.length <= 0">
        No diverse yet,please add it first.
    </div>
    <div class="portlet-body"  ng-if="diverseFields.length > 0">
        <div class="table-scrollable">
            <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    <th>No.</th>
                    <th>Diverse Id</th>
                    <th>Status</th>
                    <th ng-repeat="p in diverseFields">
                        {{p.itemProperty.name}}
                    </th>
                    <th permission-check="{{'item::itemSpec_write'}}">Action</th>
                </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="itemDiverse in itemDiverses track by $index" ng-class="{'bg-light-green':hightLights[$index]}">
                        <td>{{$index + 1}}</td>
                        <td>{{itemDiverse.id}}</td>
                        <td>{{itemDiverse.status}}</td>
                        <td ng-repeat="p in diverseFields">
                            <span  ng-repeat="property in itemDiverse.diverseProperties" ng-show="p.propertyId == property.propertyId">
                                {{property.value}}<span ng-if="property.unit">({{property.unit}})</span>
                            </span>
                        </td>
                        <td  permission-check="{{'item::itemSpec_write'}}"><a ng-click="editDiverse(itemDiverse,$index)">Edit</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

